/**
 * 问题：
 *    在 Hello.jsx 中引入的 hello.css 影响到了 World.jsx 。如何实现样式的私有化。
 *
 * React 中 组件私有化样式的方案：
 *    一、组件的类名尽可能写得特殊一点。不要跟别的组件产生冲突
 *        可以结合 scss 或 less 的嵌套写法。让我们只需要保证组件的根元素类型独一无二即可。
 *
 *    二、使用 CSSMODULE 。css 模块化
 *        1. css 文件名，需要使用 .module.css | .module.scss 之类的
 *        2. 引入该 css 时，需要使用变量接受
 *          import xxxx from './style.css'
 *
 *          xxxx 是一个对象, key 是样式文件中我们自己书写的类名，对应的 value 是最终生成的随机类名
 *          {
 *            key1: value1,
 *            key2: value2
 *          }
 *        3. 元素上使用的时候，需要通过 className={xxxx.key1}
 *
 *    三、写 行内样式。（不推荐）
 *
 *    四、使用 styled-components
 *        第三方模块，通过它直接创建带有样式的基础元素组件
 *        PS: 截至 2023-06-12 该包可能有点问题。需要安装 @5 版本
 */

// 引入其他组件
import Hello from "./Hello";
import World from "./World";

import styled from "styled-components";

// 创建一个带有样式的 Button 组件
const Button = styled.button`
  color: red;
`;

export default function App() {
  return (
    <div>
      <h1>App</h1>

      <Button>按钮</Button>

      <hr />

      <Hello />

      <hr />

      <World />
    </div>
  );
}
